<template>
	<view class="home">
		<view class="content" v-for="item in artlist" :key="item._id">
			<view class="item" @click="goToDetail(item._id)">
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<text>{{item.author}}</text>
						<!-- <text>{{item.postTime}} -->
						<uni-dateformat 
						:date="item.postTime"
						:threshold = "[60000, 3600000]"
						format="MM-dd"
						>
						</uni-dateformat>
						</text>
						<text>删除</text>
					</view>
				</view>
				<view class="pic">
					<image mode="aspectFill" src="../../static/imges/nopic.jpg"></image>
				</view>
			</view>
		</view>
		<view class="goEdit" @click="goEdit">
			<uni-icons type="plusempty" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				artlist:[]
			}
		},
		onLoad() {
			this.getartAll()
		},
		//触底方法
		onReachBottom(){
			this.getartAll()		
		},
		// 下拉刷新
		onPullDownRefresh(){
			artlist:[], // 初始化【防止数据重复】
			this.getartAll()
		},
		methods: {
			// 点击跳转详情
			goToDetail(id){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+id
				})
			},
			// 点击跳转编辑
			goEdit(){
				uni.navigateTo({
					url:"/pages/add/add"
				})
			},
			getartAll(){
				uniCloud.callFunction({
					name:"art_get_all",
					data:{
						skip:this.artlist.length // 过滤当前的数组长度
					}
				}).then(res=>{
					// console.log(res)
					let oldList = this.artlist; 
					let newList = [...oldList,...res.result.data];
					// 老数据拼接新数据
					this.artlist=newList;
					// 获取数据之后他，停止刷新
					uni.stopPullDownRefresh()
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		.content{
			padding: 30rpx;
			.item{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				.text{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right: 20rpx;
					.title{
						font-size: 44rpx;
						text-align: justify;
						color: #333;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;				//溢出内容隐藏
							text-overflow: ellipsis;		//文本溢出部分用省略号表示
							display: -webkit-box;			//特别显示模式
							-webkit-line-clamp: 2;			//行数
							line-clamp: 2;					
							-webkit-box-orient: vertical;	//盒子中内容竖直排列
					}
					.info{
						font-size: 28rpx;
						color: #888;
						text{
							padding-right: 20rpx;
						}
					}
				}
				.pic{
					width: 260rpx;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.goEdit{
			width: 120rpx;
			height: 120rpx;
			background-color: #2b9939;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			font-size: 50rpx;
			position: fixed;
			right: 60rpx;
			bottom: 100rpx;
			box-shadow: 0 0 20rpx rgba(43,153,57,0.7);
		}
	}
</style>
